<template>
	<div>
		<el-form :model="form" label-width="120px">
			<el-form-item label="用户账户">
				<el-input v-model="form.tel" placeholder="请输入手机号" />
			</el-form-item>
			<el-form-item label="订单金额">
				<el-input v-model="form.price" placeholder="请输入金额" />
			</el-form-item>
			<el-form-item label="支付方式">
				<el-radio-group v-model="form.payMethod">
					<el-radio label="微信" />
					<el-radio label="支付宝" />
				</el-radio-group>
			</el-form-item>
			<el-form-item label="订单状态">
				<el-radio-group v-model="form.state">
					<el-radio label="待付款" />
					<el-radio label="待发货" />
					<el-radio label="已发货" />
					<el-radio label="待收货" />
					<el-radio label="已关闭" />
				</el-radio-group>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">创建订单</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>


<script lang="ts" setup>
import { reactive } from 'vue'
import axios from 'axios'
import { debounce } from 'lodash'
import { ElMessage } from 'element-plus'
import { ListItemState } from '@/store'
// do not use same name with ref

const form = reactive({
	id: '',
	createTime: '',
	price: '',
	tel: '',
	payMethod: '',
	state: ''
})



const onSubmit = debounce(async () => {
	// 根据系统创建时间
	form.createTime = new Date().toLocaleString();
	// 随机ID
	form.id = Math.random().toString().slice(2)
	// 请求添加接口
	const resp = await axios.post('/api/order/list/add', form);
	// 获取接口
	const { code, message } = resp.data;
	// 验证状态码
	if (code === 200) {
		// 成功的友好提示
		ElMessage({ type: 'success', message: message });
		// 数据清空
		// Object.keys(form).forEach((key) => {
		// 	// 类型断言
		// 	form[key as keyof ListItemState] = ''
		// })
		form.payMethod = ''
		form.tel = ''
		form.price = ''
		form.state = ''
	} else {
		// 失败的友好提示
		ElMessage({ type: 'error', message: '添加数据失败' });
	}
}, 400)
</script>